<template>
	<view :style="themeColor">
		<view class="page">

			<!-- <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view> -->
			<view class="videoInfo">
				<video id="myVideo" :initial-time="initialTime" :src="fileUrl.path" autoplay="true" @error="videoError" @ended="videoEnd" @timeupdate="timeupdate" @play="onPlayerPlay" :show-progress="false" :enable-progress-gesture="false">
					<cover-view class="flex benben-position-layout flex flex-wrap align-center seeVideo_flex_0"
						:style="{height: 60+'rpx', paddingTop:StatusBarRpx+'rpx', }">
						<cover-view class='flex flex-wrap align-center justify-between flex-sub seeVideo_fd0_0'>
							<cover-view class='flex flex-wrap align-center seeVideo_fd0_0_c0' @click="isBack">
								<cover-image class='seeVideo_fd0_0_c0_c0' :src='STATIC_URL+"307.png"'></cover-image>
							</cover-view>
							<cover-view class='flex flex-wrap align-stretch justify-center'>
								<cover-view class='seeVideo_fd0_0_c1_c0'>{{name}}</cover-view>
							</cover-view>
							<cover-view class='flex flex-wrap align-center justify-end seeVideo_fd0_0_c0'>
							</cover-view>
						</cover-view>
					</cover-view>
				</video>
			</view>
			<view class="loading_css" v-if="isShow">
				<u-loading size="36" color="#E60012"></u-loading>
				<view>加载中</view>
			</view>
			<template v-else>
				<!---flex布局flex布局开始-->
				<view class="flex benben-flex-layout flex-wrap align-center seeVideo_flex_1">
					<view class='flex flex-wrap align-center flex-sub seeVideo_fd1_0'>
						<text class='seeVideo_fd1_0_c0'>评论（{{total}}）</text>
					</view>
				</view>
				<!---flex布局flex布局结束-->
				<!---flex布局flex布局开始-->
				<scroll-view class="flex benben-flex-layout flex-wrap align-center"
					:style="{height: (pageHeight-315) +'px'}" @scrolltolower="scrolltolower">
					<view class='flex flex-direction align-stretch flex-sub seeVideo_fd2_0' v-for="(item,index) in list"
						:key="index">
						<view class='flex flex-wrap align-center justify-between flex-sub'>
							<view class='flex flex-wrap align-center'>
								<image class='seeVideo_fd2_0_c0_c0_c0' mode="aspectFill" :src='item.avatar'></image>
								<text class='seeVideo_fd2_0_c0_c0_c1'>{{item.user_nickname}}</text>
							</view>
							<text class='seeVideo_fd2_0_c0_c1'>{{item.create_time}}</text>
						</view>
						<view class='flex flex-wrap align-center seeVideo_fd2_0_c1'>
							<text class='seeVideo_fd2_0_c1_c0'>{{item.content}}</text>
						</view>
					</view>
					<view class="loadmore" v-if="last_page > 1">
						<u-loadmore font-size="24" :status="status" :icon-type="iconType" :load-text="loadText" />
					</view>
				</scroll-view>
				<view class="noData_other" v-if="list.length == 0 && !isShow">
					<image :src='STATIC_URL+"no.png"'></image>
				</view>

				<!---flex布局flex布局结束-->

				<view class="common_info">
					<input v-model="value" :adjust-position="false" class="common_left" placeholder="写写您的感悟吧~"
						placeholder-style="color:#C3C3C3;font-size:28rpx;" type="text">
					<view class="common_right" @tap.stop="addComment">发送</view>
				</view>
			</template>

			<!-- <view style="height: 100rpx;"></view> -->
		</view>
	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				id: "", // 章节id
				fileUrl: {},
				name: "",
				course_id: "",
				value: "",
				pageHeight: 0,
				total: 0,
				videoContext: null,
				videoTime: 0, // 视频时间长度
				watchTime: 0, // 实际观看时间
				videoRealTime: 0, // 实时播放进度
				initialTime: 0, //该用户看到的位置
				videoDuration: 0,
				benMusic: "",

				"list": [],
				"page": 1,
				"is_pull": true,
				"last_page": 1,
				"status": 'loadmore',
				"iconType": 'flower',
				"loadText": {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				"isShow": true,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {
				id,
				name,
				course_id,
				watchTime
			} = options;
			if (id !== undefined) this.id = id;
			if (name !== undefined) this.name = name;
			if (this.name) {
				if (this.name.length > 10) {
					this.name = this.name.substring(0, 10) + '...';
				}
			}
			if (course_id !== undefined) this.course_id = course_id;
			if (watchTime !== undefined) this.watchTime = watchTime;
			this.fileUrl = uni.getStorageSync('fileUrl');
			if (this.watchTime >= this.fileUrl.duration) {
				this.watchTime = 0;
			}
			this.initialTime = this.watchTime;
			// console.log(this.fileUrl);
			this.pageHeight = uni.getSystemInfoSync().windowHeight;
			this.getCommonent();
		},
		onUnload() {
			this.editWeek();
			this.clearFlags();
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onShow() {
			this.addFlags();
		},
		onHide() {

		},
		onResize() {

		},
		// 下拉刷新
		onPullDownRefresh() {
			// this.page = 1;
			// this.is_pull = true;
			// this.isShow = true;
			// this.getList();
		},
		// 上拉加载
		onReachBottom() {
			// if (this.page >= this.last_page) return;
			// this.status = 'loading';
			// this.page++;
			// setTimeout(() => {

			// 	if (this.page >= this.last_page) this.status = 'nomore';
			// 	else this.status = 'loading';
			// 	this.is_pull = false;
			// 	this.getList();
			// }, 500)
		},
		onPageScroll(e) {

		},
		methods: {
			isBack() {
				uni.navigateBack();
			},
			scrolltolower() {
				if (this.page >= this.last_page) return;
				this.status = 'loading';
				this.page++;
				setTimeout(() => {

					if (this.page >= this.last_page) this.status = 'nomore';
					else this.status = 'loading';
					this.is_pull = false;
					this.getList();
				}, 500)
			},
			videoError() {
				this.$message.info('视频播放错误，请重试');
			},
			// 视频播放结束
			videoEnd() {
				this.editWeek();
			},
			// 查询课程评价  post65dda111a75a5
			getCommonent() {
				this.$api.post(global.apiUrls.post65dda111a75a5, {
					course_id: this.course_id,
					page: this.page
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.last_page = res.data.data.last_page;
						this.total = res.data.data.total;
						if (this.is_pull) {
							this.list = res.data.data.data;
						} else {
							this.list = this.list.concat(res.data.data.data);
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			addComment() {
				if (!this.value) {
					this.$message.info('请输入内容');
					return;
				}
				this.$api.post(global.apiUrls.post65dda00a66d40, {
					course_id: this.course_id,
					content: this.value
				}).then(res => {
					if (res.data.code == 1) {
						this.value = '';
						this.page = 1;
						this.is_pull = true;
						this.getCommonent();
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			timeupdate(e) {
				this.watchTime = parseInt(e.detail.currentTime);
			},
			onPlayerPlay() {
				
			},
			// 修改视频播放进度  postVideoWeek
			editWeek() {
				this.$api.post(global.apiUrls.post65dd94c3edd23, {
					chapter_id: this.id,
					duration: this.watchTime
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						console.log('请求成功');
					} else {
						console.log('请求失败');
					}
				})
			},
			addFlags() {
				// #ifdef APP-PLUS
				let osname = plus.os.name
				if (osname == "Android") {
					var activity = plus.android.runtimeMainActivity()
					plus.android.invoke(plus.android.invoke(activity, "getWindow"), "addFlags", 0x00002000)
				} else {
					// 监听录屏功能
					let self = this;
					self.benMusic = uni.requireNativePlugin('BenBen-music');
					self.benMusic.addScreenshots(() => {
						self.videoContext.pause();
						setTimeout(() => {
							uni.navigateBack();
							self.benMusic.removeScreenshots({});
						}, 300);
					});
				}
				// #endif
			},
			//  允许截屏  
			clearFlags() {
				// #ifdef APP-PLUS
				let osname = plus.os.name
				if (osname == "Android") {
					var activity = plus.android.runtimeMainActivity()
					plus.android.invoke(plus.android.invoke(activity, "getWindow"), "clearFlags", 0x00002000)
				} else {
					this.benMusic.removeScreenshots({});
				}
				// #endif
			},
		}
	};
</script>
<style lang="scss" scoped>
	.common_info {
		width: 100%;
		height: 96rpx;
		background: #fff;
		border: 1px solid #E2E2E2;
		padding: 0 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;

		.common_left {
			width: 526rpx;
			height: 70rpx;
			background: #F7F7F7;
			border-radius: 35rpx;
			border: 1px solid #E2E2E2;
			padding: 0 32rpx;
			font-size: 28rpx;
		}

		.common_right {
			width: 128rpx;
			height: 70rpx;
			background: #E60012;
			border-radius: 35rpx;
			font-size: 28rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.videoInfo {
		width: 100%;
		height: 460rpx;

		uni-video {
			width: 100%;
			height: 460rpx;
		}
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background-size: 100% 460;
	}

	.seeVideo_flex_0 {
		width: 750rpx;
		height: 44rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
	}

	.seeVideo_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
		width: 400rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 1;
	}

	.seeVideo_fd0_0_c0_c0 {
		width: 22rpx;
		height: 34rpx;
	}

	.seeVideo_fd0_0_c0 {
		width: 120rpx;
		transform: translateY(5rpx);
	}

	.seeVideo_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.seeVideo_flex_1 {
		margin: 0rpx 0rpx 0rpx 0rpx;
	}

	.seeVideo_fd1_0_c0 {
		font-size: 32rpx;
		font-weight: 500;
	}

	.seeVideo_fd1_0 {
		padding: 32rpx 36rpx 0rpx 36rpx;
	}

	.seeVideo_fd2_0_c1_c0 {
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
	}

	.seeVideo_fd2_0_c1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.seeVideo_fd2_0_c0_c1 {
		font-size: 24rpx;
		color: rgba(195, 195, 195, 1);
	}

	.seeVideo_fd2_0_c0_c0_c1 {
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
	}

	.seeVideo_fd2_0_c0_c0_c0 {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin: 0rpx 24rpx 0rpx 0rpx;
	}

	.seeVideo_fd2_0 {
		border-bottom: 1px solid #eee;
		padding: 24rpx 36rpx 24rpx 36rpx;
	}
</style>